<div>
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Service Configuration</h1>
        </div>

        <span us-spinner="{radius:30, width:8, length: 16}" spinner-key="deployment-spinner"></span>

        <div class="row" ng-switch on="currentStep">
            <div class="col-lg-12 col-sm-12 animate-switch-container" ng-switch-when="choose-service">
                <div class="panel panel-default">
                    <div class="panel-heading apollo-form-headline">
                        Select service
                        <button type="button" class="btn btn-success btn-xs pull-right" ng-click="newService()">
                            <i class="fa fa-plus"></i> New Service
                        </button>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-hover" datatable="ng" dt-options="dtOptions">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="service in allServices"
                                    ng-click="setSelectedService(service)"
                                    ng-dblclick="nextStep()"
                                    ng-class="{'active':service.id == selectedService.id}">
                                    <td>{{service.name}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="pull-right">
                        <button type="button" class="btn btn-primary btn-circle btn-md apollo-flow-button" ng-disabled="!selectedService" ng-click="nextStep()">
                            <i class="fa fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-lg-12 col-sm-12 animate-switch-container" ng-switch-when="configure">
                <form name="serviceForm" ng-submit="save()">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Name</label>
                            <input class="form-control" type="text" ng-model="selectedService.name" name="name" autofocus required>
                        </div>
                        <div class="form-group">
                            <label>Deployment YAML</label>
                            <ui-codemirror ui-codemirror-opts="editorOptions" ng-model="selectedService.deploymentYaml" name="deploymentYaml" required></ui-codemirror>
                        </div>
                        <div class="form-group">
                            <label>Service YAML</label>
                            <ui-codemirror ui-codemirror-opts="editorOptions" ng-model="selectedService.serviceYaml" name="serviceYaml"></ui-codemirror>
                        </div>
                        <div class="form-group">
                            <label>Ingress YAML</label>
                            <ui-codemirror ui-codemirror-opts="editorOptions" ng-model="selectedService.ingressYaml" name="incressYaml"></ui-codemirror>
                        </div>
                        <div class="form-group">
                            <label>Is part of group</label>
                            <input type="checkbox" ng-model="selectedService.isPartOfGroup" name="isPartOfGroup">
                        </div>
                        <div class="form-group">
                            <input ng-disabled="buttonDisabled || serviceForm.$invalid" class="btn btn-success" type="submit" value="Save">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
